<template>
   <div class="shopcar-container">
<div class="goods-list">
<!-- 商品列表项区域 -->
<div class="mui-card" v-for="(item,index) in  goodslist" :key="index">
<div class="mui-card-content">
<div class="mui-card-content-inner">
<mt-switch v-model="$store.getters.getselect[item.id]" @change="selectedChanged(item.id,$store.getters.getselect[item.id])"></mt-switch>
<img :src="item.thumb_path">
<div class="info">
<h1>{{item.title}}</h1>
<p>
<span class="price">￥{{item.sell_price}}</span>
<numbox :initcount = "$store.getters.getgoodscount[item.id]" :goodsid="item.id"></numbox>
<a href="#" @click.prevent="del(item.id,index)">删除</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 结算区域 -->
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner jiesuan">
<div class="left">
<p>总计（不含运费）</p>
<p>已勾选商品 <span class="red">{{$store.getters.getamount.count}}</span> 件， 总价 <span class="red">{{$store.getters.getamount.amount}}</span></p>
</div>
<mt-button type="danger">去结算</mt-button>
</div>
</div>
</div>
</div>
</template>
<script>
import numbox from '@/views/goods/numbox.vue';
import {getgoodslist} from '@/api'
export default {
    data(){
        return{
            goodslist:[]
        }
    },
    created () {
        var idarr =[]
        this.$store.state.car.forEach(item=>{
            idarr.push(item.id)
        });
        if(idarr.length<=0){
            return
        };
        getgoodslist(idarr.join(',')).then(res=>{
            console.log(res,222);
            if(res.status ===0){
               this.goodslist = res.message 
            }
        });
    },

    methods: {
        del(id,index){
            this.goodslist.splice(index,1)
            this.$store.commit('delcar',id)
        },
        selectedChanged(id,val){
            this.$store.commit('updategoods',{
                id:id,
                selected:val
            })
        }
    },


    components: {
        numbox
    }
}
</script>
<style lang="scss" scoped>
.shopcar-container {
background-color: #eee;
overflow: hidden;
.goods-list {
.mui-card-content-inner {
display: flex;
align-items: center;
padding: 10px;
/* 按钮 */
/deep/.mint-switch-core{
width: 45px;
height:25px;
&::before{
width: 23px;
height:24px;
}
&::after{
width: 23px;
height:23px;
}
}
}
img {
width: 50px;
}
h1 {
font-size: 13px;
}
.info {
display: flex;
flex-direction: column;
justify-content: space-between;
.price {
color: red;
font-weight: bold;
}
}
}
.jiesuan {
display: flex;
justify-content: space-between;
align-items: center;
.red {
color: red;
font-weight: bold;
font-size: 16px;
}
}

.mui-card{
margin: 8px;
}
}
</style>

